<template>
  <div>

    <el-dialog title="盘点页面" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="盘点数量" :label-width="formLabelWidth">
          <el-input v-model="form.countNum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateById">确定盘点</el-button>
      </div>
    </el-dialog>



    <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <el-statistic
              group-separator=","
              :precision="2"
              :value="value1"
              title="入库数量"
          ></el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic
              group-separator=","
              :precision="2"
              :value="value2"
              title="出库数量">
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic
              group-separator=","
              :precision="2"
              decimal-separator="."
              :value="value3"
              title="库存数量"
          >
            <template slot="prefix">
              <i class="el-icon-s-flag" style="color: red"></i>
            </template>
            <template slot="suffix">
              <i class="el-icon-s-flag" style="color: blue"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-button @click="getnum()">清算</el-button>
        </div>
      </el-col>
    </el-row>
    <hr>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          fixed
          prop="cropId"
          label="货物单号"
          width="250">
      </el-table-column>
      <el-table-column
          prop="cropname"
          label="货物名字"
          width="150">
      </el-table-column>
      <el-table-column
          prop="num"
          label="货物数量"
          width="150">
      </el-table-column>
      <el-table-column
          prop="status"
          label="进出状态"
          width="150">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="200">
      </el-table-column>
      <el-table-column
          prop="countNum"
          label="盘点的数量"
          width="200">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="进出时间"
          width="200">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="300">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status=='入库'" size="small" type="text" @click="show(scope.row)">
            <span style="color: #ff6262;font-size: 20px">
            <i class="el-icon-share"></i>
            </span>
          </el-button>
          <el-button v-if="scope.row.flag==1" size="small" type="text" @click="exportOne(scope.row.id)">
              导出盘点单
          </el-button>
          <el-button size="small" type="text">
            <span style="color: #ff1616;font-size: 20px">
            <i class="el-icon-menu"></i>
            </span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="gopage"
        :page-size="5"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>
  </div>

</template>

<script>
export default {
  name: "CheckView",
  data() {
    return {
      tableData:[],
      pageNum:1,
      total:0,
      like: true,
      value1:'',
      value2:'',
      value3:'',
      dialogFormVisible:false,
      formLabelWidth:'100px',
      form:{}
    }
  }, methods: {
    gopage(page){
      this.pageNum=page;
      this.getList();
    },
    getList(){
      this.axios.post("cropservice/check/list?pageNum="+this.pageNum).then(res=>{
        this.tableData=res.data.data.list;
        this.total=res.data.data.total;
      })
    },
    getnum(){
      this.axios.post("cropservice/check/getnum").then(res=>{
        console.log(res)
        this.value1=res.data.data[0];
        this.value2=res.data.data[1];
        this.value3=res.data.data[2];
      })
    },
    show(row){
      this.dialogFormVisible=true;
      this.form=row;
    },
    updateById(){
      this.axios.post("cropservice/check/updateById",this.form).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.dialogFormVisible=false;
          this.getList();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    exportOne(id){
      location.href="http://localhost:10010/cropservice/check/exportOne?id="+id;
    }

  }, created() {
    this.getList();
    this.getnum();
  }
}
</script>

<style scoped>
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
</style>
